

<template>
  <div class="homeTop">
    <div class="container">
      <!-- <div class="shouye" :class="isSY == 1 ? 'shouye' : 'onshouye'" @click="onEnterpriseHome">首页</div>
      <div class="yhdating" :class="isYH == 1 ? ' yhdating ' : 'onyhdating'" @click="onEnterpriseCenterA">易货大厅</div>
      <div class="qyzhongxin" :class="isQY == 1 ? ' qyzhongxin' : 'onqyzhongxin'" @click="onEnterpriseCenter">企业中心</div> -->
      <div v-for="(item, index) in homeTittle" :key="index">
        <div
          class="tittletype"
          :class="item.id == val ? 'ontittletype' : 'tittletype'"
          @click="tittleChoose(item.id)"
        >
          {{ item.tittle }}
        </div>
      </div>
      <div v-if="flag == false">
        <el-button
          style="
            border-radius: 31px 31px 31px 31px;
            opacity: 1;
            border: 2px solid #ffffff;
            background-color: rgba(255, 255, 255, 0);
            color: #fff;
          "
          @click="handleSetValue"
          >登录</el-button
        >
      </div>
      <div class="tittle" v-else>
        <el-dropdown class="el_dropdown" style="border: none; outline: none">
          <div
            class="el-dropdown-link el_dropdown_link"
            style="border: none; outline: none"
          >
            {{ componyTittle }}
          </div>
          <template #dropdown>
            <el-dropdown-menu class="" style="width: 155px">
              <el-dropdown-item>我的消息</el-dropdown-item>
              <el-dropdown-item @click="onEnterpriseCenter"
                >企业中心</el-dropdown-item
              >
              <el-dropdown-item @click="loginOut">退出账号</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 退出账户 -->
    <el-dialog
      v-model="centerDialogVisible"
      width="30%"
      align-center
      :show-close="false"
      center
      style="border-radius: 16px 16px 16px 16px"
    >
      <div class="textContent">
        <div class="textContent_zhuce">是否退出账号</div>
        <!-- <div class="textContent_time">您已注册过易可易</div> -->
      </div>
      <template #footer>
        <span
          class="dialog-footer"
          style="display: flex; align-items: center; justify-content: center"
        >
          <el-button
            class="el_button1"
            style=""
            @click="centerDialogVisible = false"
          >
            取消
          </el-button>
          <el-button class="el_button2" style="" @click="loginOutBtn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getToken, removeToken } from "@/utils/auth";
import { onMounted, ref } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { Logout } from "../api/login";
import { ElMessage } from "element-plus";
import { getUserInfo, removeUserInfo } from "@/service";

const router = useRouter();
const centerDialogVisible = ref(false);
defineProps({
  fatherMessage: String,
});

// 默认首页蓝色
const isSY = ref(1);
const isYH = ref(1);
const isQY = ref(1);

// console.log('fatherMessage',fatherMessage)
const count = ref(0);
const componyTittle = ref("");
const flag = ref(false);
onMounted(() => {
  const userInfo = getUserInfo();
  console.log("ssdd", userInfo.token);

  if (userInfo.token) {
    flag.value = true;
    // const componyInfo = localStorage.getItem("componyInfo");
    // //将变量接过来
    // let ComponyInfo = JSON.parse(componyInfo); //商家具体信息
    // componyTittle.value = userInfo.realname;
    componyTittle.value = userInfo.company.name;
  }
});
const handleSetValue = () => {
  // flag.value = 2;
  // componyTittle.value = "杭州易可易科技有限责任公司";
  router.push("/login");
};
// 企业中心
const onEnterpriseCenter = () => {
  router.push("/enterprise-center");
};
//退出账户
const loginOut = () => {
  centerDialogVisible.value = true;
};
//确认退出
const loginOutBtn = () => {
  Logout()
    .then((res) => {
      if (res.code == 1) {
        centerDialogVisible.value = true;
        ElMessage({ message: res.msg, type: "success" });
        removeUserInfo();
        // localStorage.removeItem("componyInfo");
        router.push("/login");
      } else {
        ElMessage({ message: res.msg, type: "success" });
      }
    })
    .catch((err) => {});
};
//首页

const homeTittle = ref([
  { tittle: "首页", id: 1 },
  { tittle: "易货大厅", id: 2 },
  { tittle: "企业中心", id: 3 },
]);
const val = ref(0);
const tittleChoose = (id) => {
  if (id == 1) {
    router.push("/home");
    val.value = id;
  }
  if (id == 2) {
    router.push("/barter-hall");
    val.value = id;
  }
  if (id == 3) {
    router.push("/enterprise-center");
    val.value = id;
  }
};

// const onEnterpriseHome = () => {
//   isSY.value = 1;
//   isYH.value = 1;
//   isQY.value = 1;
//   router.push("/home");

// };
// // 企业中心
// const onEnterpriseCenter = () => {
//   isSY.value = 2;
//   isYH.value = 1;
//   isQY.value = 2;
//   router.push("/enterprise-center");
// };
// //易货大厅
// const onEnterpriseCenterA = () => {
//   isSY.value = 2;
//   isYH.value = 2;
//   isQY.value = 1;
//   router.push("/barter-hall");
// };
</script>

<style scoped lang="less">
.tittletype {
  width: 90px;
  text-align: center;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.ontittletype {
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
.container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  // border: 1px solid red;
}
:deep(.el-drawer:focus) {
  outline: none;
}
:deep(.el-drawer__header span:focus) {
  outline: none;
}
:deep(.el-drawer__close-btn:focus) {
  outline: none;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  width: 155px;
  // border: 1px solid red;
}
.read-the-docs {
  color: #888;
}
.homeTop {
  height: 88px;
  // line-height: 88px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  // border: 1px solid red;

  // margin-left: 32px;
  .shouye {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
  }
  .yhdating {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
  }
  .qyzhongxin {
    margin-right: 32px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
  }
  .tittle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 155px;
    color: #fff;
    // border: 1px solid red;
    // height: 40px;
    // text-align: center;
    .el_dropdown {
      line-height: 20px;
      border: none;
      .el_dropdown_link {
        color: #fff;
        width: 155px;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        border: none;

        //   border: 1px solid red;
      }
    }
  }
  .textContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .textContent_zhuce {
      height: 48px;
      font-size: 23px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #141416;
      line-height: 48px;
    }
    .textContent_time {
      height: 48px;
      font-size: 23px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #141416;
      line-height: 48px;
    }
    .el_button {
      width: 352px;
      height: 48px;
      background: #2487e8;
      border-radius: 90px 90px 90px 90px;
      opacity: 1;
    }
  }
  .dialog-footer {
    :deep(.el_button1) {
      width: 168px;
      height: 48px;
      background: rgba(0, 82, 217, 0.12);
      border-radius: 90px 90px 90px 90px;
      opacity: 1;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #2487e8;
    }
    :deep(.el_button2) {
      width: 168px;
      height: 48px;
      background: #2487e8;
      border-radius: 90px 90px 90px 90px;
      opacity: 1;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #fcfcfd;
    }
  }
}
</style>
